// 问题管理-问题列表
<template>
  <div class="h-100">
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox v-if="shuaxingTree" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <div class="bg-f2 bg-fff">
          <!-- 统计面板 -->
          <stas-panel :refresh="refresh" @refreshOff="panelOff($event)"></stas-panel>
          <!-- 搜索条件 -->
          <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
            <!-- WTLX_BM -->
            <!-- 问题类型 -->
            <el-form-item label="问题类型:">
              <el-select v-model="searchCriteria.region" :no-data-text="tiText1" class="inputWidth" filterable clearable placeholder="请选择" @focus="getwenti()">
                <el-option v-for="item in lbmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备类型:">
              <el-cascader class="inputWidth" v-model.trim="searchCriteria.typeVal" :options="zicanOptions" :props="{ checkStrictly: true }" filterable clearable></el-cascader>
            </el-form-item>
            <!-- <el-form-item label="生成故障:">
              <el-select v-model="searchCriteria.isGZ" class="inputWidth" clearable placeholder="请选择/搜索">
                <el-option label="未生成" value="0"></el-option>
                <el-option label="已生成" value="1"></el-option>
                <el-option label="已解决" value="2"></el-option>
              </el-select>
            </el-form-item>-->
            <el-form-item label="首次问题时间:">
              <el-date-picker
                v-model="searchCriteria.dataTime"
                :picker-options="pickerBeginDateBefore"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btnSizeStyle" @click="onSubmit2()">查询</el-button>
            </el-form-item>
            <!-- <el-form-item class="btns-box"><el-button class="btnClass">导出</el-button> </el-form-item>
            <el-form-item class="btns-box"><el-button class="btnClass">打印</el-button> </el-form-item>-->
          </el-form>
          <!-- 表格 -->
          <el-table
            :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
            :cell-class-name="addClass"
            ref="multipleTable"
            :data="tableData"
            @select="isCheck"
            @select-all="isCheckAll"
            @row-dblclick="rowClick"
            style="width: 100%"
            border
            highlight-current-row
            stripe
            v-loading="tableLoad"
            @sort-change="sortthiscolumn"
          >
            <!-- :header-cell-class-name="headrClass" -->
            <!-- 提示语句 -->
            <template slot="empty">{{ tableMessage }}</template>
            <el-table-column type="selection" width="45" :selectable="checkboxT"></el-table-column>
            <!-- 序号 -->
            <el-table-column type="index" min-width="50" label="序号" align="center"></el-table-column>
            <el-table-column prop="zcmc" label="设备名称" sortable :show-overflow-tooltip="true" min-width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.zcmc }}</span>
              </template>
            </el-table-column>
            <el-table-column label="安装地址" min-width="240" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjd + scope.row.xxdz }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="设备IP" min-width="120"></el-table-column>
            <el-table-column prop="zclxmc" label="设备类型" min-width="160" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
                <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
                <span>{{ scope.row.zclxmc }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="counts" label="问题类型数量" min-width="100"> -->
            <el-table-column prop="counts" label="问题数量" min-width="100">
              <!-- 更新于2021/04/23 -->
              <template slot-scope="scope">
                <span class="haveLinks" @click="gzXiangqing(scope.row)">{{ scope.row.counts }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="wtscsj" label="首次问题时间" sortable min-width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.wtscsj | dateFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="wtzhscsj" label="最后问题时间" sortable min-width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.wtzhscsj | dateFormat }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="wtlx" label="问题类型" min-width="120" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.lxmcs ? scope.row.lxmcs + ' / ' : '' }}</span>
                <span>{{ scope.row.wtlxmc }}</span>
              </template>
            </el-table-column>-->
            <!-- <el-table-column label="问题次数" min-width="88">
              <template slot-scope="scope">
                <span :class="[scope.row.lxid === 1 || scope.row.wtlx_BM === 37 ? '' : 'haveLinks']" @click="countBtn(scope.row)">{{ scope.row.wtjs }}</span>
                <el-tooltip class="item" effect="dark" content="近30分钟内没有记录" placement="top-start" v-if="scope.row.lxid === 1 || scope.row.wtlx_BM === 37">
                  <i class="el-icon-warning-outline" style="font-size: 15px; color: #7f7f7f; padding-left: 5px"></i>
                </el-tooltip>
              </template>
            </el-table-column>-->
            <!-- <el-table-column prop="wtz" label="问题描述" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.wtz }}</span>
              </template>
            </el-table-column>-->
            <!-- <el-table-column prop="wtly" label="问题来源" min-width="120" show-overflow-tooltip></el-table-column> -->
            <!-- <el-table-column prop="sfyscgz" label="故障" min-width="80">
              <template slot-scope="scope">
                <el-tag :type="gzTag[scope.row.sfyscgz].type">{{ gzTag[scope.row.sfyscgz].title }}</el-tag>
              </template>
            </el-table-column>-->
            <el-table-column fixed="right" label="操作" min-width="116" align="right">
              <template slot-scope="scope">
                <div class="operations">
                  <!-- 不可以点击加上 noAction这个类名 -->
                  <!-- <el-button type="text" @click="handleClick(scope.row)">编辑</el-button> -->
                  <el-button type="text" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true" class="Btn_nan" @click="yuanChenKZ(scope.row)">远程控制</el-button>
                  <span class="operation"></span>
                  <el-button type="text" @click="showPingOk(scope.row)" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true">ping</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row class="page-row">
            <el-col :span="12">
              <!-- <el-button type="primary" @click="addWithList('加入白名单')" class="btnSizeStyle" v-if="quanxianBtns.btn2" :disabled="deleteAll.length > 0 ? false : true">加入白名单</el-button> -->
              <el-button type="primary" :loading="generateFaulttLoad" v-if="quanxianBtns.btn1" class="btnSizeStyle" @click="generateFault('生成故障')" :disabled="deleteAll.length > 0 ? false : true"
                >生成故障</el-button
              >
              <el-button type="danger" v-if="quanxianBtns.btn3" class="btnSizeStyle" @click="delBtn('批量删除')" :disabled="deleteAll.length > 0 ? false : true">批量删除</el-button>
            </el-col>
            <el-col :span="12" style="height: 47px; display: table">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 提示窗 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="576px">
      <span style="color: #5a5e66" v-html="tips"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btnSizeStyle">取 消</el-button>
        <el-button type="primary" :loading="dialogLoad" @click="submitok(title)" class="btnSizeStyle" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 计数提示窗 -->
    <el-dialog title="问题次数详情" :visible.sync="dialogVisible_count" width="900px">
      <el-row class="detailsRow">
        <el-col :span="12">
          <div class="details-row">
            <span>设备名称：</span>
            <span>{{ detailsDate.zcmc }}</span>
          </div>
          <div class="details-row">
            <span>设备类型：</span>
            <span>
              {{ detailsDate.zclxmc1 ? detailsDate.zclxmc1 + ' / ' : '' }}
              {{ detailsDate.zclxmc2 ? detailsDate.zclxmc2 + ' / ' : '' }}
              {{ detailsDate.zclxmc }}
            </span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="details-row">
            <span>设备IP：</span>
            <span>{{ detailsDate.ip }}</span>
          </div>
          <div class="details-row">
            <span>设备问题：</span>
            <span>{{ detailsDate.lxmcs + ' / ' + detailsDate.wtlxmc }}</span>
          </div>
        </el-col>
      </el-row>
      <el-alert title="只显示最近30分钟的问题历史数据。" :closable="false" type="warning" show-icon></el-alert>
      <!-- 表格 -->
      <el-table
        :data="gridData"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        border
        highlight-current-row
        stripe
        v-loading="gridLoad"
        max-height="320px"
      >
        <template slot="empty">{{ gridMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column min-width="170" property="date" label="问题时间" sortable>
          <template slot-scope="scope">
            <svg class="iconfont" aria-hidden="true" style="width: 12px; height: 12px; padding-right: 5px">
              <use :xlink:href="`#el-icon-my${Number(scope.row.dqzt) === 1 ? 'not_generated' : 'generated'}`" />
            </svg>
            <span>{{ scope.row.wtscsj | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="150" property="name" label="问题描述">
          <template slot-scope="scope">
            <span>{{ scope.row.wtz }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row noBorder">
        <el-col :span="12">
          <el-pagination background @current-change="handleCurrentChange_details" :current-page="currentPage_details" layout=" prev, pager, next,total" :total="total_details"></el-pagination>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-button type="primary" size="small" @click="dialogVisible_count = false" class="btnSizeStyle">关 闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <problemCount :problemCountData="problemCountData"></problemCount>
  </div>
</template>
<script>
import StasPanel from '../../statsPanel'
import { yeWu, ziC } from '@/utils/allUrl.js'
import { getUrl } from '@/utils/getUrl.js'
// import { endLoading } from '@/utils/loading.js'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
import problemCount from '@/components/Business/components/problemCount.vue'
export default {
  computed: {
    transferHeight() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  data: function () {
    return {
      iocns: ['start', 'end', 'fault_circle', 'workorder_circle', 'generated'],
      treesBox: {
        // url: 'yonghu/selectYongHuXiaQuByWtjs',
        url: 'ZI_CHAN',
        GZKZ: false,
      }, // tree图的请求地址
      shuaxingTree: true, // 刷新tree
      zicanOptions: [], // 资产类型
      lbmcOptions: [], // 问题类型
      searchCriteria: {
        region: '',
        typeVal: '', // 设备类型
        isGZ: '0',
        dataTime: '',
        namer: '', // 设备名称/ip
      },
      tableData: [],
      gzTag: [
        {
          title: '未生成',
          type: 'danger',
        },
        {
          title: '已生成',
          type: 'primary',
        },
        {
          title: '已解决',
          type: 'success',
        },
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      tips: '',
      curHeight: null,
      // ping
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      refresh: false, // 刷新面板
      deleteAll: [],
      title: '',
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      xianQu: null, // 辖区搜索条件
      quanxianBtns: {
        btn1: false,
        btn2: false,
        btn3: false,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      gridMessage: '',
      gridLoad: false,
      gridData: [],
      gridTimer: null, // 计数定时器
      tiText1: '暂无数据', // 问题类型提示
      dialogVisible_count: false,
      detailsDate: {},
      currentPage_details: 1,
      total_details: 0,
      problemCountData: {
        type: '设备',
        // url: 'wtjs/selectWenTiJianSuo',
        xianqingID: '', // 详情ID
        contractDialogVisible: false,
        contractDetailList: [], // 故障详情
      },
      listQuery: {
        sortby: '',
        order: '',
      },
      generateFaulttLoad: false, //  生成故障等待状态
      generateFaultTime: null,
      dialogLoad: false, // 弹窗确定按钮等待状态
      dialogTime: null,
    }
  },
  watch: {
    generateFaulttLoad(newVal, oldVal) {
      this.generateFaultTime = setTimeout(() => {
        if (this.generateFaulttLoad) {
          this.generateFaulttLoad = false
        }
      }, timeLoad)
    }, // 生成故障
    dialogLoad(newVal, oldVal) {
      this.dialogTime = setTimeout(() => {
        if (this.dialogLoad) {
          this.dialogLoad = false
        }
      }, timeLoad)
    }, // 弹窗
    // gridLoad(newVal, oldVal) {
    //   console.log('----------', newVal, oldVal)
    //   this.gridTimer = setTimeout(() => {
    //     if (this.gridLoad) {
    //       console.log('newVal', this.gridLoad, '---', tableMessageText)
    //       this.gridLoad = false
    //       this.gridData = []
    //       this.gridMessage = tableMessageText
    //     }
    //   }, timeLoad)
    // },
  },
  created: function () {
    // 按钮权限
    this.jurisdictionBtn()
    // 获取列表数据
    this.getshuList()
    // 获取问题类型
    // this.getwenti()
    // 获取资产类型
    this.getzican()
    this.gridTimer = setTimeout(() => {
      if (this.gridLoad) {
        // console.log('newVal', this.gridLoad, '---', tableMessageText)
        this.gridLoad = false
        this.gridData = []
        this.gridMessage = tableMessageText
      }
    }, timeLoad)
  },
  components: { StasPanel, Ping, treesBox, problemCount },
  methods: {
    checkboxT(row, index) {
      // 0 未生成 1已生成
      if (row.tatal > 0) {
        return true
      } else {
        return false
      }
    },
    gzXiangqing(row) {
      this.problemCountData.contractDetailList = row
      this.problemCountData.contractDialogVisible = true
      this.problemCountData.xianqingID = row.id
    },
    // table
    // headrClass({ row, column, rowIndex, columnIndex }) {
    //   if (column.sortable) {
    //     return 'table_header_sort'
    //   }
    // },
    // 计数按钮
    countBtn(row) {
      if (row.lxid === 1 || row.wtlx_BM === 37) {
        return
      }
      this.currentPage_details = 1
      this.popoverShow(row)
      this.detailsDate = row
      this.dialogVisible_count = true
    },
    handleCurrentChange_details(val) {
      this.currentPage_details = val
      this.popoverShow(this.detailsDate)
    },
    async popoverShow(row, M_) {
      clearTimeout(this.gridTimer)
      this.gridLoad = true
      this.gridTimer = setTimeout(() => {
        if (this.gridLoad) {
          // console.log('newVal', this.gridLoad, '---', tableMessageText)
          this.gridLoad = false
          this.gridData = []
          this.gridMessage = tableMessageText
        }
      }, timeLoad)
      this.gridMessage = ''
      const params = new URLSearchParams()
      params.append('WTLX_BM', row.wtlx_BM)
      params.append('SB_ID', row.sb_ID)
      params.append('M_', this.currentPage_details)
      params.append('N_', 10)
      const { data: res } = await this.$http.post(`${yeWu}wtjs/selectHistroy`, params)
      this.gridLoad = false
      switch (res.code) {
        case '0000':
          this.gridData = res.data.list
          this.total_details = res.data.count
          break
        default:
          this.gridData = []
          this.total_details = 0
          this.gridMessage = res.message
          break
      }
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'YWZX_WTGL_WTLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'wtjs:updateWenTiJianSuo') {
              this.quanxianBtns.btn1 = true // 问题生成故障
            } else if (item2.qxdm === 'wtjs:insertWTBMD') {
              this.quanxianBtns.btn2 = true // 问题批量生成白名单
            } else if (item2.qxdm === 'wtjs:deleteMoreWenTiJianSuo') {
              this.quanxianBtns.btn3 = true // 问题批量删除
            }
          })
        }
      })
    },
    // 获取数据列表
    getshuList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      params.append('sort', 'DESC')
      params.append('order', 'WTSCSJ')
      // params.append('SFYSCGZ', this.searchCriteria.isGZ)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.onSubmit(this.currentPage, this.pageSize)
    },
    onSubmit2() {
      this.currentPage = 1
      this.pageSize = 10
      this.onSubmit(1, 10)
    },
    // 查询
    onSubmit(size, current, val) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      // const { region, typeVal, isGZ, dataTime, namer } = this.searchCriteria
      const { region, typeVal, namer, dataTime } = this.searchCriteria
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (val) {
        if (val.levels === 1) {
          params.append('SF', val.label)
        } else if (val.levels === 2) {
          params.append('CS', val.label)
        } else if (val.levels === 3) {
          params.append('QX', val.label)
        } else if (val.levels === 4) {
          params.append('XZJD', val.label)
        }
      } else {
        if (this.xianQu) {
          if (this.xianQu.levels === 1) {
            params.append('SF', this.xianQu.label)
          } else if (this.xianQu.levels === 2) {
            params.append('CS', this.xianQu.label)
          } else if (this.xianQu.levels === 3) {
            params.append('QX', this.xianQu.label)
          } else if (this.xianQu.levels === 4) {
            params.append('XZJD', this.xianQu.label)
          }
        }
      }
      params.append('userId', user.id)
      // params.append('sort', 'DESC')
      // params.append('order', 'WTSCSJ')
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('M_', size)
      params.append('N_', current)
      if (dataTime) {
        params.append('WTSCSJStart', dataTime[0])
        params.append('WTSCSJEnd', dataTime[1])
      }
      params.append('ZCLX_XJ', typeVal[typeVal.length - 1] || '')
      params.append('WTLX_BM', region)
      // params.append('SFYSCGZ', isGZ)
      params.append('ZCMC', namer)
      this.setList(params)
    },
    // 表格加载
    loadTable() {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          this.total = 0
        }
      }, timeLoad)
    },
    async setList(params) {
      this.deleteAll = []
      this.loadTable()
      this.tableLoad = true
      // const { data: res } = await this.$http.post(`${yeWu}wtjs/selectWenTiJianSuo`, params)
      const { data: res } = await this.$http.post(`${yeWu}wtjs/getWenTiJianSuoList`, params)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            item.gridData = []
          })
          this.tableData = res.data.list
          this.total = res.data.count
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 问题类型
    async getwenti() {
      this.lbmcOptions = []
      const params = new URLSearchParams()
      params.append('FLBISNULL', 0)
      const { data: res } = await this.$http.post(`${yeWu}wtgzzd/selectWenTiGuZhangZiDian`, params)
      if (res.code !== '0000') {
        this.lbmcOptions = []
        this.tiText1 = res.message
      } else {
        const list = []
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.lbmc,
          }
          list.push(k)
        })
        this.lbmcOptions = list
      }
    },
    // 获取资产
    async getzican() {
      const params = new URLSearchParams()
      params.append('FLXID', 0)
      const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
      if (res.code !== '0000') {
        this.zicanOptions = []
        this.$message({
          type: 'error',
          message: '设备类型' + res.message,
          center: true,
        })
      } else {
        const city = JSON.stringify(res.data.list)
        const newCity = city.replace(/id/g, 'value')
        const cityList = newCity.replace(/lxmc/g, 'label')
        this.zicanOptions = JSON.parse(cityList)
      }
    },
    // 勾选
    isCheck(selection, row) {
      this.deleteAll = selection
      // const arrs = []
      // selection.forEach(item => {
      //   arrs.push(item.id)
      // })
      // const s1 = new Set(arrs)
      // this.deleteAll = [...s1]
    },
    // 全选
    isCheckAll(selection, row) {
      this.deleteAll = selection
      // const arrs = []
      // selection.forEach(item => {
      //   arrs.push(item.id)
      // })
      // const s1 = new Set(arrs)
      // this.deleteAll = [...s1]
    },
    rowClick(row, column, event) {
      // const a = this.deleteAll.findIndex(item => item === row.id)
      const a = this.deleteAll.findIndex((item) => item.id === row.id)
      if (a !== -1) {
        this.deleteAll.splice(a, 1)
        this.$refs.multipleTable.toggleRowSelection(row, false)
      } else if (this.checkboxT(row, null)) {
        // this.deleteAll.push(row.id)
        this.deleteAll.push(row)
        const s1 = new Set(this.deleteAll)
        this.deleteAll = [...s1]
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
    handleClick(row) {
      console.log(row)
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // console.log('row:', row, 'column:', column, 'rowIndex:', rowIndex, 'columnIndex:', columnIndex)
      // if (columnIndex === 1) {
      //   return 'fontColor'
      // }
    },
    handleSizeChange(val) {
      this.tiText1 = ''
      this.currentPage = 1
      this.pageSize = val
      this.onSubmit(this.currentPage, val)
    },
    handleCurrentChange(val) {
      this.tiText1 = ''
      this.currentPage = val
      this.onSubmit(val, this.pageSize)
    },
    delBtn(val) {
      this.tips = `<svg
          class="iconfont"
          aria-hidden="true"
          style="width: 20px;height: 20px;vertical-align: middle;padding-right: 5px;"
        >
          <use xlink:href="#el-icon-mywarning" style="font-size:50px" />
        </svg>删除问题数据不能恢复，请谨慎操作，是否继续？`
      this.title = val
      this.dialogVisible = true
    },
    addWithList(val) {
      const s = this.deleteAll.some((item) => {
        return item.wtbmdjs > 0
        // if (item.wtbmdjs > 0) {
        //   return this.$message({
        //     type: 'error',
        //     message: '您的选项中已加入白名单，请检查您的选中项',
        //     center: true
        //   })
        // } else {
        //   this.tips = `<svg
        //   class="iconfont"
        //   aria-hidden="true"
        //   style="width: 20px;height: 20px;vertical-align: middle;padding-right: 5px;"
        // >
        //   <use xlink:href="#el-icon-mywarning" style="font-size:50px" />
        // </svg>加入白名单成功后，所选设备及对应的问题类型系统将不再提醒，是否加入？`
        //   this.title = val
        //   this.dialogVisible = true
        // }
      })
      if (s) {
        return this.$message({
          type: 'error',
          message: '您的选项中已加入白名单，请检查您的选中项',
          center: true,
        })
      } else {
        this.tips = `<svg
          class="iconfont"
          aria-hidden="true"
          style="width: 20px;height: 20px;vertical-align: middle;padding-right: 5px;"
        >
          <use xlink:href="#el-icon-mywarning" style="font-size:50px" />
        </svg>加入白名单成功后，所选设备及对应的问题类型系统将不再提醒，是否加入？`
        this.title = val
        this.dialogVisible = true
      }
    },
    generateFault(val) {
      // this.title = val
      // this.tips = '确定生成故障？'
      // this.dialogVisible = true
      var arr = []
      this.deleteAll.forEach((item) => {
        arr.push(item.id)
      })
      clearTimeout(this.generateFaultTime)
      this.generateFaulttLoad = true
      this.isGenerate(arr)
      // const s = this.deleteAll.some((item) => {
      //   return item.sfyscgz !== 0 && item.sfyscgz !== null
      //   // if (item.sfyscgz !== 0 && item.sfyscgz !== null) {
      //   //   return this.$message({
      //   //     type: 'error',
      //   //     message: '您的选项中已有生成故障，请检查您的选中项',
      //   //     center: true
      //   //   })
      //   // }
      //   // this.title = val
      //   // this.tips = '确定生成故障？'
      //   // this.dialogVisible = true
      // })
      // if (s) {
      //   return this.$message({
      //     type: 'error',
      //     message: '您的选项中已有生成故障，请检查您的选中项',
      //     center: true,
      //   })
      // } else {
      //   this.title = val
      //   this.tips = '确定生成故障？'
      //   this.dialogVisible = true
      // }
    },
    yuanChenKZ(scope) {
      if (scope.zclxmc === '运维主机' && scope.zclx === 53) {
        localStorage.setItem('SN', scope.sbxlh)
        localStorage.setItem('password', scope.dlmm)
        localStorage.setItem('IP', scope.ip)
        localStorage.setItem('XQBM', scope.zcxqbm)
        sessionStorage.setItem('mianUrl', '')
        localStorage.setItem('zcmc', scope.zcmc)
        this.$router.push({ name: 'mainboaredit' })
        // this.$router.push('/mainboard')
      } else {
        window.open('http://' + scope.ip, '_blank')
      }
    },
    // ping
    showPingOk(val) {
      this.ping.speedOpen = true
      this.ping.ip = val.ip
      this.ping.name = val.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // tree形搜索
    treeClick(e) {
      this.pageSize = 10
      this.currentPage = 1
      this.onSubmit(1, 10, e.type)
      this.xianQu = e.type
    },
    reload() {
      this.shuaxingTree = false
      this.$nextTick(() => (this.shuaxingTree = true))
    },
    panelOff(val) {
      this.refresh = val.type
    },
    // 加入白名单/删除/生成故障
    async submitok(title) {
      var arr = []
      this.deleteAll.forEach((item) => {
        arr.push(item.id)
      })
      var user = JSON.parse(getUrl('userconter'))
      console.log('------', title)
      switch (title) {
        case '加入白名单':
          this.addWithListFun(user, arr)
          break
        case '生成故障':
          this.isGenerate(arr)
          break
        case '批量删除':
          this.batchDelFun(arr)
          break
      }
      if (title === '加入白名单') {
      } else if (title === '生成故障') {
      } else if (title === '批量删除') {
      }
    },
    // 加入白名单
    async addWithListFun(user, arr) {
      const params = new URLSearchParams()
      params.append('USERID', user.id)
      params.append('ids', arr)
      const { data: res } = await this.$http.post(`${yeWu}wtjs/insertWTBMD`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.getshuList()
      this.dialogVisible = false
      this.deleteAll = []
      this.$refs.multipleTable.clearSelection()
    },
    // 判断是否更新工单信息
    async isGenerate(arr) {
      const params = new URLSearchParams()
      params.append('zcid', arr)
      const { data: res } = await this.$http.post(`${yeWu}wtjs/isGenerate`, params)
      this.generateFaulttLoad = false
      // console.log(res)
      switch (res.code) {
        case '0000':
          this.dialogVisible = false
          this.$message.success(res.message)
          this.getshuList()
          // 刷新列表
          break
        case '0055':
          this.$confirm('当前设备未解决,是否更新工单信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              // 确定
              this.generateFaultFun(arr)
            })
            .catch(() => {
              // 取消
            })
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 生成故障
    async generateFaultFun(arr) {
      const params = new URLSearchParams()
      params.append('SFYSCGZ', '1')
      // params.append('ids', arr)
      params.append('zcid', arr)
      // const { data: res } = await this.$http.post(`${yeWu}wtjs/updateWenTiJianSuo`, params)
      const { data: res } = await this.$http.post(`${yeWu}wtjs/generateFault`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.getshuList()
      this.refresh = true
      this.dialogVisible = false
      this.deleteAll = []
      this.$refs.multipleTable.clearSelection()
    },
    // 批量删除
    async batchDelFun(arr) {
      // clearTimeout(this.dialogTime)
      // this.dialogLoad = true
      const params = new URLSearchParams()
      params.append('ids', arr)
      const { data: res } = await this.$http.post(`${yeWu}wtjs/deleteMoreWenTiJianSuo`, params)
      // this.dialogLoad = false
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.reload()
      this.getshuList()
      this.refresh = true
      this.dialogVisible = false
      this.deleteAll = []
      this.$refs.multipleTable.clearSelection()
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/detailsRow.scss';
@import '@/assets/scss/problemList.scss';
@import '@/assets/scss/footer.scss';
$c909399: #909399;
$c333333: #333333;
$c039D12: #039d12;
.el-alert {
  margin-bottom: 15px;
  height: 40px;
  border: 1px solid #f5e3bf;
  &.el-alert--warning.is-light {
    background-color: #fffbe6;
    color: #e28b02;
  }
}
.popover4 {
  color: $c039D12;
}
.el-form-item__label {
  font-weight: 600;
}
.usersNumber {
  cursor: pointer;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: nowrap;
  position: relative;
}
.usersNumber:after {
  content: '...';
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10%;
  height: 1.8em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
.inputWidth {
  width: 180px;
}
</style>
